<template>
  <div class="search">
    <div class="top">
      <span></span>
      <input
        type="text"
        @input="inputfn"
        v-model="val"
        placeholder="搜索歌曲、歌手、专辑"
        @keyup.enter="action"
      />
      <li v-if="clear" @click="clearfn"></li>
    </div>

    <div class="beforeSearch" v-if="!search">
      <div class="mid">
        <h3>热门搜索</h3>
        <Loading v-if="!hot"></Loading>
        <div class="search_hot" v-else>
          <span
            v-for="(item, n) in Slist"
            :key="n"
            @click="tosearch(item.first)"
            >{{ item.first }}</span
          >
        </div>
      </div>
      <div class="btm">
        <ul>
          <li v-for="(item, n) in localhistory" :key="n * 200">
            <div class="timeImg"></div>
            <div class="text">
              <h3 @click.stop="tosearch(item)">{{ item }}</h3>
              <span class="del" @click="delfn(n)"></span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="afterSearch" v-else :class="{ loading: loading }">
      <Loading v-if="loading"></Loading>
      <SearchRes
        v-else
        :searchList="searchList"
        :selectedSong="selectedSong"
        :playingStatus="playingStatus"
        :suggest="suggest"
        :val="val"
        :onsuggest="onsuggest"
        @tosearch="tosearch"
        @play-song="$emit('play-song', $event, searchList)"
      ></SearchRes>
    </div>
  </div>
</template>

<script>
import SearchRes from "@/components/SearchRes.vue";
import Loading from "@/components/Loading.vue";
export default {
  name: "Search",
  props: ["selectedSong", "playingStatus"],
  components: {
    SearchRes,
    Loading,
  },

  data: function () {
    return {
      Slist: [],
      val: "",
      clear: false,
      localhistory: [],
      searchList: [],
      suggest: [],
      search: false,
      loading: false,
      onsuggest: false,
      hot: false,
      timmer: null,
    };
  },
  computed: {},
  methods: {
    inputfn() {
      this.clear = true;
      this.search = true;
      this.loading = true;
      if (this.timmer) {
        clearTimeout(this.timmer);
      }
      this.timmer = setTimeout(() => {
        if (this.val) {
          this.axios
            .get(
              `https://apis.netstart.cn/music/search/suggest?keywords=${this.val}&type=mobile`
            )
            .then((res) => {
              this.suggest = res.data.result.allMatch;
              this.onsuggest = true;
              this.loading = false;
            });
        } else {
          this.clear = false;
          this.search = false;
        }
      }, 300);
    },
    clearfn() {
      this.val = "";
      this.clear = false;
      this.search = false;
    },
    action() {
      this.loading = true;
      let arr = [];
      if (this.val) {
        if (localStorage.getItem("history")) {
          arr = JSON.parse(localStorage.getItem("history"));
        }
        arr = arr.filter((ele) => (ele == this.val ? false : ele));
        arr.unshift(this.val);
        this.localhistory = arr;
        localStorage.setItem("history", JSON.stringify(arr));
        this.axios
          .get(`https://apis.netstart.cn/music/search?keywords=${this.val}`)
          .then((ref) => {
            this.searchList = ref.data.result.songs;
            this.loading = false;
            this.onsuggest = false;
          });
        this.search = true;
        // this.val = "";
        // this.clear = false;
      }
    },
    delfn(n) {
      let arr1 = JSON.parse(localStorage.getItem("history"));
      arr1.splice(n, 1);
      localStorage.setItem("history", JSON.stringify(arr1));
      this.localhistory = arr1;
    },
    tosearch(str) {
      this.val = str;
      this.clear = true;
      this.action();
    },
  },
  created: function () {
    this.axios.get("https://apis.netstart.cn/music/search/hot").then((res) => {
      this.Slist = res.data.result.hots;
      this.hot = true;
    });
    this.localhistory = JSON.parse(localStorage.getItem("history"));
  },
};
</script>

<style lang="less" scoped>
.search {
  .top {
    padding: 15px 10px;
    border-bottom: 1px solid #ddd;
    position: relative;
    span {
      position: absolute;
      top: 24px;
      left: 18px;
      display: inline-block;
      width: 13px;
      height: 13px;
      background-image: url();
    }
    input {
      width: 100%;
      height: 30px;
      outline: none;
      background-color: #ebecec;
      border: none;
      border-radius: 30px;
      text-indent: 2em;
      font-size: 14px;
    }
    li {
      list-style: none;
      padding: 0;
      margin: 0;
      width: 14px;
      height: 14px;
      background-image: url();
      position: absolute;
      right: 20px;
      top: 24px;
    }
  }
  .mid {
    padding: 15px 10px 10px;
    h3 {
      font-size: 12px;
    }
    .search_hot {
      margin: 10px 0 7px;
      span {
        height: 30px;
        display: inline-block;
        margin: 0 8px 8px 0px;
        font-size: 14px;
        padding: 0 13px;
        border-radius: 30px;
        border: 1px solid #ddd;
        line-height: 28px;
        text-align: center;
      }
    }
  }
  .btm {
    // overflow-y: auto;
    li {
      height: 45px;
      display: flex;
      align-items: center;
      .timeImg {
        width: 15px;
        height: 15px;
        margin: 0 10px;
        background-image: url();
      }
      .text {
        height: 100%;
        line-height: 45px;
        flex: 1;
        border-bottom: 1px solid #ddd;
        position: relative;
        .del {
          display: inline-block;
          width: 12px;
          height: 12px;
          position: absolute;
          right: 20px;
          top: 20px;
          background-image: url();
        }
      }
    }
  }
  .afterSearch {
    &.loading {
      margin-top: 30vh;
    }
  }
}
</style>